<template>
  <view class="mxp-steps">
    <view :class="[direction === 'column' ? 'steps-column' : 'steps-row']">
      <view class="text-container">
        <view v-for="(item, index) in newList" :key="index" class="text-view">
          <text v-if="item.title" :style="[{ color: index === step ? linColor : defaultColor }, item.style || {}, item.title.style || {}]" class="title">
            {{ item.title.label }}
          </text>
          <text
            v-if="item.time"
            key="text-2"
            class="desc"
            :style="[{ color: index === step ? linColor : defaultColor }, item.style || {}, item.time.style || {}]"
          >
            {{ item.time.label }}
          </text>
          <text
            v-if="item.desc"
            key="text-3"
            class="time"
            :style="[{ color: index === step ? linColor : defaultColor }, item.style || {}, item.desc.style || {}]"
          >
            {{ item.desc.label }}
          </text>
          <mxp-line :color="columnBorderBottomColor"></mxp-line>
        </view>
      </view>
      <view :class="[direction === 'column' ? 'column-container' : 'row-container']">
        <view v-for="(item, index) in newList" :key="index" class="line-item">
          <view
            class="line line-before"
            :style="{ backgroundColor: index <= step && index !== 0 ? linColor : index === 0 ? 'transparent' : defaultColor }"
          ></view>
          <view v-if="index === step" key="view-1" class="check">
            <mxp-icon-image v-if="item.icon" :icon="item.icon" size="14px"></mxp-icon-image>
            <mxp-icon v-else :color="linColor" :name="icon" size="14px"></mxp-icon>
          </view>
          <view v-else key="view-2" class="circle" :style="{ backgroundColor: index < step ? linColor : defaultColor }"></view>
          <view
            class="line line-after"
            :style="{
              backgroundColor: index < step && index !== newList.length - 1 ? linColor : index === newList.length - 1 ? 'transparent' : defaultColor,
            }"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import MxpIcon from '../mxp-icon/mxp-icon.vue';
  import MxpLine from '../mxp-line/mxp-line.vue';
  import MxpIconImage from '../mxp-icon-image/mxp-icon-image.vue';
  import { type CSSProperties, type PropType, computed } from 'vue';
  import type { $AllColorStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { isObject } from '../mxp-tool/utils/verify';

  export type $ItemoptionObj = {
    /** 文本的样式 */
    style?: CSSProperties;
    /** 显示的文本 */
    label: number | string;
  };
  export type $Itemoption = $ItemoptionObj | number | string;
  export type $StepsItem = {
    /** 标题 */
    title?: $Itemoption;
    /** 描述 */
    desc?: $Itemoption;
    /** 时间 */
    time?: $Itemoption;
    /** 自定义图片路径 （强烈建议传入绝对路径） */
    icon?: string;
    /** 样式(title，desc，time都会应用此样式) */
    style?: CSSProperties;
    /** 更多描述列表 */
    moreDescList?: $Itemoption[];
  };

  export type $NewStepsItem = {
    /** 标题 */
    title?: $ItemoptionObj;
    /** 描述 */
    desc?: $ItemoptionObj;
    /** 时间 */
    time?: $ItemoptionObj;
    /** 自定义图片路径 （强烈建议传入绝对路径） */
    icon?: string;
    /** 样式(title，desc，time都会应用此样式) */
    style?: CSSProperties;
    /** 更多描述列表 */
    moreDescList?: $ItemoptionObj[];
  };

  defineOptions({
    name: 'mxp-steps',
  });

  const props = defineProps({
    /** 排列方向 row column */
    direction: { type: String as PropType<'column' | 'row'>, default: 'row' },
    /** 状态（用于展示线条颜色和图标） */
    state: { type: String as PropType<'error' | 'success' | 'warning'>, default: '' },
    /** 当前步骤 */
    step: { type: Number, default: 0 },
    /** 默认状态颜色 */
    defaultColor: { type: String as PropType<$AllColorStr>, default: '#B7BDC6' },
    /** 成功状态的颜色 */
    successColor: { type: String as PropType<$AllColorStr>, default: '#223aec' },
    /** 错误状态下的颜色 */
    errorColor: { type: String as PropType<$AllColorStr>, default: '#F56C6C' },
    /** 警告状态下的颜色 */
    warningColor: { type: String as PropType<$AllColorStr>, default: '#E6A23C' },
    /** 排列方向为column是底部的边框颜色 */
    columnBorderBottomColor: { type: [Boolean, String] as PropType<$AllColorStr | boolean>, default: true },
    /** 步骤列表 */
    list: { type: Array as PropType<$StepsItem[]>, default: () => [] },
    ...publicStyeProps,
  });

  const linColor = computed<$AllColorStr>(() => {
    return props.state === 'error' ? props.errorColor : props.state === 'warning' ? props.warningColor : props.successColor;
  });

  const icon = computed(() => {
    return props.state === 'error' ? 'guanbi1' : props.state === 'warning' ? 'jinggao' : 'queding';
  });

  const newList = computed<$NewStepsItem[]>(() => {
    return JSON.parse(JSON.stringify(props.list)).map((item: $StepsItem) => {
      if ('title' in item) {
        item.title = isObject(item.title) ? item.title : { label: String(item.title) };
      }
      if ('time' in item) {
        item.time = isObject(item.time) ? item.time : { label: String(item.time) };
      }
      if ('titdescle' in item) {
        item.desc = isObject(item.desc) ? item.desc : { label: String(item.desc) };
      }
      if ('moreDescList' in item && Array.isArray(item.moreDescList)) {
        item.moreDescList = item.moreDescList.map((more) => (isObject(more) ? more : { label: String(more) }));
      }
      return item;
    });
  });
</script>

<style lang="scss" scoped>
  .mxp-steps {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .steps-row {
    display: flex;
    flex-direction: column;

    .text-container {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin-bottom: 8px;

      .text-view {
        display: flex;
        flex: 1;
        flex-direction: column;

        .title {
          font-size: 14px;
          line-height: 16px;
          text-align: center;
        }

        .desc {
          font-size: 12px;
          line-height: 14px;
          text-align: center;
        }
      }
    }
  }

  .steps-column {
    display: flex;
    flex-direction: row-reverse;

    .text-container {
      display: flex;
      flex: 1;
      flex-direction: column;

      .text-view {
        display: flex;
        flex-direction: column;
        padding: 6px 0;

        .title {
          font-size: 14px;
          line-height: 18px;
          text-align: left;
        }

        .desc {
          font-size: 12px;
          line-height: 18px;
          text-align: left;
        }

        .time {
          font-size: 12px;
          line-height: 18px;
          text-align: left;
        }
      }
    }
  }

  .row-container {
    display: flex;
    flex-direction: row;

    .line-item {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 14px;
      line-height: 14px;

      .line {
        flex: 1;
        height: 1px;
        background-color: #b7bdc6;

        &.line-before {
          transform: translateX(-1px);
        }

        &.line-after {
          transform: translateX(1px);
        }
      }

      .check {
        margin: 0 6px;
      }

      .circle {
        width: 5px;
        height: 5px;
        margin: 0 3px;
        background-color: #b7bdc6;
        border-radius: 50%;
      }
    }
  }

  .column-container {
    display: flex;
    flex-direction: column;
    width: 30px;

    .line-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .line {
        width: 1px;
        background-color: #b7bdc6;

        &.line-before {
          height: 6px;
          transform: translate(0, -13px);
        }

        &.line-after {
          flex: 1;
          transform: translate(0, 1px);
        }
      }

      .check {
        height: 14px;
        margin: 2px 0;
        line-height: 14px;
      }

      .circle {
        width: 5px;
        height: 5px;
        margin: 4px 0 5px;
        background-color: #b7bdc6;
        border-radius: 50%;
      }
    }
  }
</style>
